<template>
  <a-layout class="wrapper">
    <a-layout-header class="header">
      <div class="headBox">
        <div class="logo">
          <img src="../components/image/image.png" />
        </div>
        <div class="right">
          <a-space>
            <div class="username">{{ username }}</div>
            <a-popconfirm title="确认退出登录吗？" ok-text="确认" cancel-text="取消" @confirm="loginOut">
              <div class="logout">退出登录</div>
            </a-popconfirm>
          </a-space>
        </div>
      </div>
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          mode="inline"
          :style="{ height: '100%', borderRight: 0 }"
        >
          <a-menu-item key="main" @click="mainForm">首页</a-menu-item>
          <a-sub-menu key="sub1">
            <template #title>
              <span>
                <user-outlined />
                系统管理
              </span>
            </template>
            <a-menu-item key="1">
              <router-link :to="{ path: '/system-manage/user-manage' }">人员管理</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <template #title>
              <span>
                <laptop-outlined />
                基础配置
              </span>
            </template>
            <a-menu-item key="5">
              <router-link :to="{ path: '/base-manage/dictionary-manage/navList' }">数据字典</router-link>
            </a-menu-item>
            <a-menu-item key="6">
              <router-link :to="{ path: '/base-manage/ranch-manage/index' }">牧场管理</router-link>
            </a-menu-item>
            <a-menu-item key="7"
              ><router-link :to="{ path: '/base-manage/pen-manage/index' }">圈舍管理</router-link>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 24px 24px 24px" class="content">
        <a-layout-content :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script setup>
// , UserOutlined
import { ref, onMounted } from 'vue';
const selectedKeys2 = ref(['1']);
const openKeys = ref(['sub1', 'sub2']);
import { useRouter } from 'vue-router';
import Login from '@/api/login';
const router = useRouter();
const mainForm = () => {
  selectedKeys2.value = ['main'];
  router.push({ path: '/main/mainForm' });
};
const username = ref('');
const token = localStorage.getItem('token');
console.log(token);

// 获取用户信息
const getUsername = async () => {
  const res = await Login.getUserList();
  if (res.data.code === 100200) {
    console.log(res);
    username.value = res.data.data.userName;
    // res.data.data.userName
    // debugger;
    console.log(username);
  }
};
onMounted(() => {
  mainForm(); // 调用 mainForm
  getUsername(); // 获取用户名
});
const loginOut = async () => {
  await Login.userLogout();
  localStorage.removeItem('token');

  router.push({ path: '/' });
};
</script>
<style scoped>
/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} */
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}
img {
  width: 96px;
  height: 27px;
}
.wrapper {
  height: 100%;
}
.username,
.logout {
  color: #fff;
  font-size: large;
  /* border: 2px solid red; */
}
.headBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
